<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>始终飞向鼠标的纸飞机</title>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="../../libs/font-awesome.min.css">
    <link rel="stylesheet" href="index.css" />

    <link rel="icon" type="image/x-icon" href="../../../favicon.ico" />
</head>

  <body>
    <div id="plane">
      <i class="fa fa-paper-plane" aria-hidden="true"></i>
    </div>
    <script>
      let plane = document.getElementById("plane");
      let deg = 0,
        ex = 0,
        ey = 0,
        vx = 0,
        vy = 0,
        count = 0;
      window.addEventListener("mousemove", (e) => {
        ex = e.x - plane.offsetLeft - plane.clientWidth / 2;
        ey = e.y - plane.offsetTop - plane.clientHeight / 2;
        deg = (360 * Math.atan(ey / ex)) / (2 * Math.PI) + 45;
        if (ex < 0) {
          deg += 180;
        }
        count = 0;
      });
      function draw() {
        plane.style.transform = "rotate(" + deg + "deg)";
        if (count < 100) {
          vx += ex / 100;
          vy += ey / 100;
        }
        plane.style.left = vx + "px";
        plane.style.top = vy + "px";
        count++;
      }
      setInterval(draw, 1);
    </script>
  </body>
</html>
